<template>
  <view>


    <add-order-cell label="车辆类型" has-slot border-radius="14rpx 14rpx 0 0" un-hover>
    <!--  <l-radio-group :checked="form.vehicleType" :radios="vehicleType" @change="vehicleTypeChange" />-->
	  {{ vehicleType[form.vehicleType].label }} 
    </add-order-cell>
    <template >
      <add-order-cell label="车辆" must has-slot :arrow="!vehicleAdd" >
       {{ form.vehicleName}}
      </add-order-cell>
      <add-order-cell label="选择司机" must has-slot arrow  >
       {{form.driverName}}
      </add-order-cell>
    </template>

  </view>
</template>

<script>
import AddOrderCell from '../add-order-cell/add-order-cell'
import { mapGetters } from 'vuex'
import { pageHistoryOutwardAutoCompany } from '../../api'
import { vehicleType, driverType, payWay } from '../../index'
export default {
  name: 'OrderVehicleModule',
  components: {
    AddOrderCell
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    startDate: {
      type: String,
      default: ''
    },
    endDate: {
      type: String,
      default: ''
    },
    showDel: {
      type: Boolean,
      default: false
    },
    inx: {
      type: Number,
      default: 0
    },
    showPlatformDriver: {
      type: Boolean,
      default: true
    },
    vehicleAdd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      vehicleType,
      driverType,
      payWay,
      form: {
        vehicleName: '', // 车辆名称
        driverName: '', // 司机名称
        realPrice: '', // 车费
        passengers: '', // 乘车人数
        driverSubsidyAmount: '', // 司机补助
        driverRemark: '', // 司机备注
        vehicleType: 0, // 车辆类型 0-自有车辆 1-外调车辆
        driverType: 0, // 司机类型 0-自有司机 1-平台司机 2-外调司机
        driverId: '', // 司机id
        vehicleId: '', // 车辆id
        platformDriverFee: '', // 司机费用
        // 外调表单
        autoCompanyName: '',
        seatNum: '',
        driverPhone: '',
        payWay: 3,
        outwardRealPrice: ''
      },
      setVehicleAttrs: [
        'driverName',
        'platformDriverFee',
        'driverId',
        'vehicleName',
        'autoCompanyName',
        'driverPhone',
        'vehicleId'
      ],
      setDriverAttrs: [
        'driverName',
        'driverPhone',
        'platformDriverFee',
        'driverId'
      ],
      showAutoCompanyName: false, // 展示外调车辆车企列表
      position: 0, // 车企名称列表定位值
      list: [], // 车企名称列表
      current: 1, // 页码
      limit: 10, // 每页多少个
      hasMore: true // 是否有下一页
    }
  },
  computed: {
    driver() {
      if (this.form.platformDriverFee) {
        return this.form.driverName + ' ' + this.form.platformDriverFee + '元'
      } else {
        return this.form.driverName
      }
    },
    ...mapGetters({
      editOrderSave: 'editOrderSave'
    })
  },
  watch: {
    form: {
      handler(e) {
        this.$emit('update', e)
      },
      deep: true
    },
    data: {
      handler(e) {
        this.initData(e)
      },
      deep: true
    },
    showPlatformDriver(e) {
      if (!e) {
        this.driverType.pop()
        if (this.form.driverType === 2) this.driverTypeChange({ value: 0 })
      } else if (this.driverType.length < 3) {
        this.driverType.push({ label: '平台', value: 1 })
      }
    }
  },
  created() {
    this.initData(this.data)
  },
  methods: {
    initData(e,type) {
      Object.keys(this.form).forEach(item => {
		  if(item == 'vehicleType') this.form[item] = e[item] || this.form[item]
		  else this.form[item] = e[item]

      })
    },
    // 修改车辆类型nextPage
    vehicleTypeChange(e) {
      this.form.vehicleType = e.index
      this.setVehicleAttrs.forEach(attr => {
        if (this.editOrderSave && e.index === this.editOrderSave.vehicleType) this.form[attr] = this.editOrderSave[attr]
        else this.form[attr] = ''
        if (this.editOrderSave && this.editOrderSave === 1) this.form.platformDriverFee = this.editOrderSave.platformDriverFee
      })
      if (this.form.driverType) {
        this.setDriverAttrs.forEach(attr => {
          this.form[attr] = ''
        })
      }
      if (e.vehicleType == 1) {
        this.current = 1
        this.listHistoryOutwardAutoCompany()
      }
    },
    // 修改司机类型
    driverTypeChange(e) {
      this.form.driverType = e.value
      this.setDriverAttrs.forEach(attr => {
        if (this.editOrderSave && e.value === this.editOrderSave.driverType) this.form[attr] = this.editOrderSave[attr]
        else this.form[attr] = ''
      })
    },

    nextPage() {
      if (this.hasMore) {
        this.current++
        this.listHistoryOutwardAutoCompany()
      }
    },
    // 获取外调车辆车企名称列表
    async listHistoryOutwardAutoCompany() {
      const [err, res] = await pageHistoryOutwardAutoCompany({
        current: this.current,
        limit: this.limit,
        autoCompanyName: this.form.autoCompanyName
      })
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data.records
      if (!list) list = []
      if (list.length < this.limit) this.hasMore = false
      if (this.current === 1) this.list = list
      else this.list.push(...list)
      this.position = (this.list.length < 5 ? this.list.length : 5) * 106
    },
    delVehicle() {
      this.$emit('delVehicle')
    }
  }
}
</script>

<style scoped lang="scss">
.list-item{
  border-bottom:2rpx solid $color-border;
  height:106rpx;
}
.item:last-child .list-item{
  border:none;
}
</style>
